import React from "react";

class GridBox extends React.Component {
  state = {
    list: [],
    isShowDialog: false,
    isEdit: false,
    formName: '',
    formUrl: '',
    currentIndex: -1
  };

  componentDidMount() {
    let list = localStorage.getItem('list')
    if(list) {
      this.setState({
        list: JSON.parse(list)
      })
    }
  }

  handleShowDialog() {
    this.setState({
      isShowDialog: true,
      isEdit: false
    })
  }

  handlehideDialog() {
    this.setState({
      isShowDialog: false,
      formName: '',
      formUrl: '',
      currentIndex: -1
    })
  }

  handleEdit(item, index) {
    this.setState({
      isShowDialog: true,
      isEdit: true,
      formName: item.name,
      formUrl: item.url,
      currentIndex: index
    })
  }

  handleDelete() {
    let list = this.state.list
    if(this.state.isEdit) {
      list.splice(this.state.currentIndex, 1)
      this.setState({
        isShowDialog: false,
        formName: '',
        formUrl: '',
        currentIndex: -1,
        list
      })
      localStorage.setItem('list', JSON.stringify(list))
    }else {
      this.setState({
        formName: '',
        formUrl: ''
      })
    }
  }

  addOrEdit() {
    let list = this.state.list
    if(this.state.isEdit) {
      list[this.state.currentIndex] = {
        name: this.state.formName,
        url: this.state.formUrl
      }
    }else {
      list.push({
        name: this.state.formName,
        url: this.state.formUrl
      })
    }
    this.setState({
      isShowDialog: false,
      formName: '',
      formUrl: '',
      currentIndex: -1,
      list
    })
    localStorage.setItem('list', JSON.stringify(list))
  }
  

  render() {
    return (
      <div>
        <div className="grid_box">
          {
            this.state.list.map((item, index) => {
              return (
                <div className="grid_tile" key={index}>
                  <img className="icon_edit" src="/images/icon_more.png" onClick={this.handleEdit.bind(this, item, index)} />
                  <a className="grid" href={item.url}>
                    <img src="/images/icon.png" />
                    <p className="text">{item.name}</p>
                  </a>
                </div>
              )
            })
          }
          
          <div className="grid_tile" onClick={this.handleShowDialog.bind(this)}>
            <div className="grid">
              <img src="/images/icon_add.png" />
              <p className="text">添加快捷方式</p>
            </div>
          </div>
        </div>

        {
          this.state.isShowDialog ? (<div className="dialog_box">
            <p className="title">添加快捷方式</p>
            <div className="ipt_box">
              <p className="txt">名称</p>
              <input className="ipt" placeholder="请输入名称" value={this.state.formName} onChange={e => this.setState({formName: e.target.value})} />
            </div>
            <div className="ipt_box">
              <p className="txt">网址</p>
              <input className="ipt" placeholder="请输入网址" value={this.state.formUrl} onChange={e => this.setState({formUrl: e.target.value})}/>
            </div>
            <div className="btn_box">
              <button className="btn_delete" onClick={this.handleDelete.bind(this)}>删除</button>
              <div>
              <button className="btn_cancel" onClick={this.handlehideDialog.bind(this)}>取消</button>
              <button className="btn_submit" onClick={this.addOrEdit.bind(this)}>完成</button>
              </div>
            </div>
          </div>) : null
        }

        <style jsx>{`
          .grid_box {
            display: flex;
            flex-wrap: wrap;
            width: 565px;
            margin: 0 auto;
          }
          .grid_tile {
            position: relative;
            width: 112px;
            padding: 16px 0;
            background-color: #ffffff;
          }
          .grid_tile:hover {
            background-color: #F2F2F2;
          }
          .grid_tile:hover .grid img {
            background-color: #E5E7E8;
          }
          .grid_tile .icon_edit {
            position: absolute;
            right: 0;
            top: 0;
            display: none;
            width: 16px;
            height: 16px;
          }
          .grid_tile:hover .icon_edit {
            display: block;
          }
          .grid_tile .grid {
            display: flex;
            cursor: pointer;
            text-decoration: none;
            width: 100%;
            flex-direction: column;
            align-items: center;
            
          }
          .grid_tile .grid img {
            width: 48px;
            height: 48px;
            margin-bottom: 16px;
            background-color: #F1F3F4;
            border-radius: 100%;
          }
          .grid_tile .grid .text {
            width: 100px;
            font-size: 14px;
            color: #333333;
            text-align: center;
            margin: 0;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
          .dialog_box {
            position: fixed;
            left: calc(50% - 170px);
            bottom: 210px;
            width: 340px;
            padding: 15px 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 1px 6px rgb(32 33 36 / 28%);
            box-sizing: border-box;
          }
          .dialog_box .title {
            font-size: 16px;
            color: #333333;
            margin: 0 0 20px;
          }
          .dialog_box .ipt_box {
            margin-bottom: 20px;
          }
          .dialog_box .ipt_box .txt {
            font-size: 14px;
            color: #333333;
            margin: 0 0 10px;
          }
          .dialog_box .ipt_box .ipt {
            width: 100%;
            height: 32px;
            font-size: 14px;
            color: #333333;
            padding: 0 15px;
            outline: none;
            border: none;
            background-color: #F2F3F5;
            box-sizing: border-box;
          }
          .dialog_box .btn_box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 20px;
          }
          .dialog_box .btn_delete,
          .dialog_box .btn_cancel {
            cursor: pointer;
            width: 60px;
            height: 32px;
            font-size: 14px;
            color: #409eff;
            outline: none;
            border: 1px solid #eeeeee;
            background-color: #ffffff;
            border-radius: 4px;
          }
          .dialog_box .btn_submit {
            cursor: pointer;
            width: 60px;
            height: 32px;
            font-size: 14px;
            color: #ffffff;
            outline: none;
            border: none;
            margin-left: 10px;
            background-color: #409eff;
            border-radius: 4px;
          }
        `}
        </style>
      </div>
      
      
    )
  }
}

export default GridBox;
